<template>
  <div class="container">
    <Category title="美食" :dataList="foods">
       <img slot="center" src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" alt="">
    </Category>

    <Category title="游戏" :dataList="games">
      <!-- <a slot="footer" href="www.baidu.com">百度</a>
           <a slot="footer" href="www.sina.com">新浪</a> -->
      <!-- <div class="film" slot="footer">
        <a href="www.baidu.com">百度</a>
        <a href="www.sina.com">新浪</a>
      </div> -->
      <!-- <template slot="footer">
          <a href="www.baidu.com">百度</a>
          <a href="www.sina.com">新浪</a>
      </template> -->
      <template v-slot:footer>  <!-- 最新的方式-->
          <a href="www.baidu.com">百度</a>
          <a href="www.sina.com">新浪</a>
      </template>
      
    </Category>

    <Category title="电影" :dataList="films">
      
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'
export default {
  name: "App",
  components:{
    Category
  },
  data() {
    return {
      foods:['火锅','牛排','地锅鸡','小龙虾','烧烤'],
      games:['LOL','炒鸡玛丽','穿越火线','劲舞团','Red2'],
      films:['不是药神','生死狙击','流浪地球','画皮','让子弹飞']
    }
  },
};
</script>
 <style scoped>
  .container,.film {
    display: flex;
    justify-content: space-around;
  }
  img{
    width: 180px;
  }
</style>
